<template>
	<view class="left clearfix bai">
		<uni-popup ref="popup" type="center" @maskClick="closePopup()">
			<view class="dep-box left clearfix relative">
				<view class="login-close absolute" @click="closePopup()">
					<uni-icons type="closeempty" color="#fff" size="18"></uni-icons>
				</view>
				
				<view class="login-title left clearfix">
					订单支付
				</view>
				
				
				<view class="pay-content left clearfix">
					<view class="pay-text left clearfix">
						如果需要开发票，请致电 <label style="color:#2979ff;font-weight:500;font-size:15px;">0530-29007777</label>
					</view>
					<view class="pay-texts left clearfix">
						<text><label>订单编号：</label><label>{{orderNo}}</label></text>
						<text><label>商品名称：</label><label>{{data.title}}</label></text>
						<text><label>实付金额：</label><label style="color:#f3a73f;font-size:20px;font-weight:bold;">￥{{data.price}}</label></text>
					</view>
					
					<view class="pay-type left clearfix">
						<view class="pay-item left relative" @click="setPay('wxpay')" :style="pay=='wxpay'?'border:1px solid #42b983;':'border:1px solid #ddd;'">
							<view>
								<uni-icons type="icon-IMliaotian-shixin" color="#42b983" size="22" custom-prefix="iconfont"></uni-icons>
							</view>
							<view>微信支付</view>
							
							<view class="absolute pay-dui" v-if="pay =='wxpay'">
								<uni-icons type="icon-xuanze1" color="#42b983" size="15" custom-prefix="iconfont"></uni-icons>
							</view>
						</view>
						<view class="pay-item left relative" @click="setPay('alipay')" :style="pay=='alipay'?'border:1px solid #42b983;':'border:1px solid #ddd;'">
							<view><uni-icons type="icon-zhifubao2" color="#2979ff" size="22" custom-prefix="iconfont"></uni-icons></view>
							<view>支付宝支付</view>
							<view class="absolute pay-dui" v-if="pay == 'alipay'">
								<uni-icons type="icon-xuanze1" color="#42b983" size="15" custom-prefix="iconfont"></uni-icons>
							</view>
						</view>
					</view>
					
					<view class="pay-erweima left clearfix" v-if="pay == 'wxpay'">
						<view class="pay-left left clearfix">
							<image src="../static/images/erweima.png" mode="aspectFill" style="width:180px;height:180px;margin:10px;"></image>
						</view>
						<view class="pay-left right clearfix">
							<image src="../static/images/weixinzhifu.png" mode="aspectFill" style="width:120px;height:175px;margin:20px;"></image>
						</view>
					</view>
					
					<view class="pay-erweima left clearfix" v-if="pay == 'alipay'">
						<view class="pay-left left clearfix">
							<image src="../static/images/erweima.png" mode="aspectFill" style="width:180px;height:180px;margin:10px;"></image>
						</view>
						<view class="pay-left right clearfix">
							<image src="../static/images/zifubaozhifu.png" mode="aspectFill" style="width:120px;height:175px;margin:20px;"></image>
						</view>
					</view>
					
					
				</view>
				
				<view class="pay-submit left clearfix">
					<view class="pay-submit-button left">
						我已支付完成
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<style scoped>
	.pay-submit-button{width:150px;height:40px;background:#42b983;font-size:13px;text-align:center;line-height:40px;border-radius: 5px;color:#fff;}
	.pay-submit{width:150px;margin-left:calc((100% - 150px)/2);height:40px;line-height:40px;margin-top:50px;}
	.pay-left{width:50%;height:200px;text-align: center;}
	.pay-erweima{width:90%;margin-left:5%;height:200px;margin-top:40px;}
	.pay-dui{width:20px;height:20px;right:3px;bottom:10px;text-align: right;}
	.pay-item view{float:left;margin-left:10px;line-height:40px;}
	.pay-item{height:40px;line-height:40px;border:1px solid #ddd;margin:5px;width:130px;font-size:14px;background:#fff;border-radius: 5px;margin-right:20px;cursor:pointer;}
	.pay-type{width:90%;margin-left:5%;height:50px;margin-top:20px;}
	.pay-texts text label:last-child{color:#666;}
	.pay-texts text label:first-child{font-weight:500;color:#333;}
	.pay-texts text{float:left;width:100%;line-height:35px;height:35px;font-size:14px;}
	.pay-texts{width:90%;margin-left:5%;min-height:100px;border-bottom:1px solid #eee;margin-top:20px;padding-bottom:20px;}
	.pay-text{width:90%;margin-left:5%;line-height:35px;border-radius: 5px;background:#fef6ec;color:#f3a73f;font-size:14px;text-align: center;}
	.pay-content{width:100%;height:500px;margin-top:20px;}
	.login-title{width:90%;height:30px;font-size:18px;font-weight:500;text-align: left;margin-top:20px;color:#151b26;margin-left:20px;}
	.login-close{width:35px;height:35px;line-height:35px;text-align:center;border-radius: 50%;background:rgba(21, 27, 38, .6);top:0;right:-64px;cursor: pointer;}
	.dep-box{width:600px;height:700px;border-radius: 10px;background-color:#fff;background-image: url('/static/images/body-bj.png'), linear-gradient(180deg, #e9f1ff, #f5f9ff);background-repeat: no-repeat;background-size: 100% auto;}
</style>


<script>
	var db = uniCloud.database();
	var global = uniCloud.importObject('global',{customUI:true});
	export default {
		data(){
			return {
				pay:'wxpay',
				orderNo:''
			}
		},
		props:{
			show:{ //是否显示
				type:Boolean,
				default:false
			},
			data:{ //支付数据
				type:Object
			}
		},
		mounted() {
			//生成订单号
			this.getOrderNo();
		},
		watch:{
			"show"(val){
				if(val == true){
					this.$refs.popup.open();
				}else if(val == false){
					this.$refs.popup.close();
				}
			}
		},
		methods:{
			//设置支付类型
			setPay(item){
				this.pay = item;
			},
			//生成订单号
			getOrderNo(){
				// 获取当前日期和时间
				    const now = new Date();
				    const year = now.getFullYear();
				    // 月份从 0 开始，所以要加 1，并且保证是两位数
				    const month = String(now.getMonth() + 1).padStart(2, '0');
				    const day = String(now.getDate()).padStart(2, '0');
				    const hours = String(now.getHours()).padStart(2, '0');
				    const minutes = String(now.getMinutes()).padStart(2, '0');
				    const seconds = String(now.getSeconds()).padStart(2, '0');
				
				    // 生成 5 位随机整数
				    const randomNumber = String(Math.floor(Math.random() * 90000) + 10000);
				
				    // 组合成订单号
				    var data =  `${year}${month}${day}${hours}${minutes}${seconds}${randomNumber}`;
					this.orderNo = data;
			},
			closePopup(){
				this.$refs.popup.close();
				this.$emit('close',false);
			}
		}
	}
</script>

